const data = [
  {
    name: 'a',
    value: 10,
    hasError: false,
  },
  {
    name: 'b',
    value: 14,
    hasError: true,
  },
  {
    name: 'c',
    value: 19,
    hasError: true,
  },
  {
    name: 'd',
    value: 10,
    hasError: false,
  },
  {
    name: 'e',
    value: 8,
    hasError: false,
  },
];
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Line } from '@ant-design/plots';

const DemoLine = () => {

  const config = {
    data,
    padding: 'auto',
    xField: 'name',
    yField: 'value',
    xAxis: {
      tickCount: 5,
    },
    annotations: data.filter(d => d.hasError).map(d => ({
      type: 'dataMarker',
      position: [d.name, d.value],
      line: null,
      point: {
        style: {
          fill: '#f5222d',
          stroke: '#f5222d',
        },
      },
      autoAdjust: false,
    })),
  };

  return <Line {...config} />;
};

export default DemoLine;